<template>
  <div class="home">
    <div class="header">
      <div class="item" v-for="item in totalData" :key="item.id">
        {{ item.title }}
        <div class="num">{{ item.total }}</div>
        <div class="bottom">今日销售额: {{ item.current }}</div>
      </div>
    </div>

    <!-- 访问时长 -->
    <div class="content">
      <div class="time-info">
        <div class="title">月销售额</div>
        <div id="charts" style="width: 100%; height: 360px"></div>
      </div>
      <div class="area">
        月销售额
        <div id="charts1" style="width: 100%; height: 360px"></div>
      </div>
    </div>
    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>最新内容</span>
        </div>
        <div v-for="o in content" :key="o" class="text item">
          <br />
          {{ o }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>新增产品</span>
        </div>
        <div v-for="o in newGoods" :key="o" class="text item">
          <br />
          {{ o }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">
            <router-link to="/goods" style="color: #fff">商品管理</router-link>
          </el-button>
          <el-button type="primary">
            <router-link to="/params" style="color: #fff">相关参数</router-link>
          </el-button>
          <el-button type="primary">
            <router-link to="/user" style="color: #fff">个人中心</router-link>
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalData: [],
      content: {
        item1: "admin用户已经成功登录！！！！！",
        item2: "又有产品被用户购买啦！！！",
      },
      newGoods: {
        item1: "手机/数码: 苹果14",
        item2: "电视: 液晶电视",
      },
    };
  },
  mounted() {
    //进度
    //销售数据量
    this.$api.getStatistical().then((res) => {
      console.log("销售数据量", res.data);
      //totalData
      if (res.data.status === 200) {
        this.totalData = res.data.list;
      }
    });
    //--销售比----------------------
    this.$api.getSellTotal().then((res) => {
      //获取x轴数据
      let xData = res.data.info.date;
      //获取数据
      let xResult = res.data.info.xResult;
      let titleArr = [];
      let data = [];

      xResult.forEach((ele) => {
        titleArr.push(ele.xName);
        ele.data.forEach((item) => {
          data.push(item.num);
        });
      });
      //折线
      this.initCharts(
        xData,
        data.slice(0, 6),
        data.slice(6, 12),
        data.slice(12, 18)
      );
      // 饼图
      this.bingCharts(
        xData,
        data.slice(0, 3),
        data.slice(3, 6),
        data.slice(9, 12)
      );
    });
  },
  methods: {
    //折线图
    initCharts(data, data1, data2, data3) {
      let charts = this.$echarts.init(document.getElementById("charts"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["家具", "手机", "家电"],
          left: 100,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "家具",
            type: "line",
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: data1,
          },
          {
            name: "手机",
            type: "line",
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: data2,
          },
          {
            name: "家电",
            type: "line",
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: data3,
          },
        ],
      };
      charts.setOption(option);
    },
    //饼图
    bingCharts(data4, data5, data6, data7) {
      let charts = this.$echarts.init(document.getElementById("charts1"));
      let option = {
        tooltip: {
          trigger: "item",
          type:data4
        },
        legend: {
          data: ["家具", "手机", "家电"],
          left: 100,
        },
        series: [
          {
            name: "家具",
            type: "pie",
            data: data5,
            radius: "70%",
          },
          {
            name: "手机",
            type: "pie",
            data: data6,
            radius: "70%",
          },
          {
            name: "家电",
            type: "pie",
            data: data7,
            radius: "70%",
          },
        ],
      };
      charts.setOption(option);
    },
  },
};
</script>

<style lang='less' scoped>
.home {
  margin: 10px;
  height: 100%;
}
.header {
  display: flex;
  padding-right: 30px;
  justify-content: space-around;
  .item {
    height: 100px;
    width: 280px;
    padding: 10px;
    margin-left: 15px;
    background: #fff;
    border-radius: 10px;
    font-weight: bold;
    color: #fff;
    // text-align: center;
    position: relative;
    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }
    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }
  .item:nth-child(1) {
    background-image: linear-gradient(#df7ddc, #88554d);
  }
  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #526e2e);
  }
  .item:nth-child(3) {
    background-image: linear-gradient(#6e4fb5, #713c7a);
  }
  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #58397a);
  }
}
.content {
  margin: 20px;
  display: flex;
  height: 400px;
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }
  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}
.home-footer {
  display: flex;
  padding-left: 20px;
  justify-content: space-around;
  align-items: center;
  .box-card {
    margin-right: 30px;
    height: 100%;
    margin-bottom: 10px;
    width: 380px;
    span {
      font-weight: 600;
    }
  }
  .box-card:nth-child(3){
    height: 170px;
  }
}
#charts1 {
  margin-top: 20px;
}
</style>